<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script>
    let arr = ['html','css','js'];
    let _root = document.getElementById('root');
    let _arry = new Proxy(arr,{
        set(data,name,val){
            data[name] = val;
            render();
            return true;
        }
    });
    let timer = null;
    function render(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            console.log('render!!!');
            _root.innerHTML = '';
            _arry.forEach((item)=>{
                let div = document.createElement('div');
                div.innerHTML = item;
                _root.appendChild(div);
            });
        },0)
    }
    render();
    </script>
</body>
</html>